<template>
 <div>
    <fou-dialog :title="'操作記錄'" v-model:dialogValue="dialog" :width="'75%'" >
        <template #content>
    <!-- 搜索導航 -->
    <el-form inline>
      <el-form-item>
        <el-input v-model="screenFrom.name" placeholder="學生名稱 老師名稱" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button color="#081F42" @click="getTableList" size="small">確定</el-button>
        <el-button color="#1C768C" @click="delCheckBox" size="small" :disabled="delsable" >多选({{num ||  0}})</el-button>
      </el-form-item>
    </el-form>
             <ProTable
                v-loading="isLoading"
                :data="tableData"
                :page="page"
                :column="column"
                :rowControl="[]"
                :elProps="{
                    border:true,//边框
                    selection:true
                }"
                :disabled="[]"
                :controlWidth="{
                        create_time:400,
                        content:'操作內容'
                }"
                @page-change="onPageChange"
                @pageRefresh="pageRefresh"
                @selection-change="onSelectionChange"
                >
                <!-- <template #default="{ row, propname }"> -->
                    <!-- <div  v-if="propname === 'school' || propname === 'cate' ">
                          {{row[propname] && row[propname].name ? row[propname].name : row[propname]}}
                    </div> -->
                <!-- </template> -->
                <template #search_operate>
                    <el-table-column  fixed="right" width="200px" label="操作">
                        <template #default="scope">
                            <el-link :underline="false" type="primary"  @click="handleSelect(scope.row,scope.$index)" >刪除</el-link >
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
        </template>
    </fou-dialog>
      <DelTimeLogDio ref="DelTable" @deltable="deltable"></DelTimeLogDio>
 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {elProps,controlWidth} from './index.js'
import {timeLog,timeLogDel} from '@/http/index.js'
import {message,loading,closeLoading} from '@/common/function.js'
import DelTimeLogDio from './DelTimeLogDio.vue'
const delsable = ref(true)
const column = {
    create_time:'日期',
    content:'操作內容'
}
const isLoading = ref(true)
const dialog = ref(false)
const init = async ()=>{
    dialog.value =  true
    getTableList()
}
const tableData = ref([])
const screenFrom = reactive({
          name: '',
          page:'',
          limit:'',
          school_id:localStorage.getItem('school_id')
        })
const page = reactive({page: 1,limit: 10,total: 10,page_size: [10, 20, 30]})

const getTableList = async()=>{
    let obj = Object.assign(screenFrom,page)
    const data = await timeLog(obj)
    if (data.code == 200) {
      isLoading.value = false
        tableData.value = data.data.data
        page.total = data.data.total
    }
}
// 刪除
const DelTable = ref('')
const delData = ref([])
const handleSelect = async (row)=>{
  delData.value = []
  if (row) {
    delData.value.push(row)
  }
  DelTable.value.init(delData.value)
}
const deltable = (e)=>{
  if (e) {
  del(e.toString())
  }
}
const delCheckBox = ()=>{
  del(ids.value)
}
const del = async (e)=>{
      const data = await timeLogDel(e)
    if (data.code == 200) {
      getTableList()
      isLoading.value = false
      message('刪除成功')
    }
}
const ids = ref('')
const num = ref(0)
const onSelectionChange = (e)=>{
    let row_id = []
  e.forEach(e => {
    row_id.push(e.id)
  });
  num.value = row_id.length
  ids.value = row_id.toString()
  delsable.value = e.length === 0;
}
// 分頁
const onPageChange = async({ e, type }) => {
    isLoading.value = true
  if (type == "current") {
    page.page = e;
  }
  if (type == "size") {
    page.page = 1
    page.limit = e;
  }
  getTableList()
};
const pageRefresh = ()=>{
   isLoading.value = true
    page.page = 1
    page.limit = 10
    getTableList()
}
defineExpose({
    init
})
</script>

<style scoped lang='less'>

</style>